<template>
  <div class="sales-board-des">
    <div class="sales-board-intro">
      <h2>哈哈哈哈</h2>
      <p>
        未来，大数据会变得越来越重要，其核心应用预测也会成为互联网行业以及产业变革的重要力量，我们很有必要对数据预测及其分析方法进行全面且深入的了解。在这一点上，《大数据预测》是本很好的读物，适合大数据所有相关行业的人阅读。
      </p>
    </div>
    <div class="sales-board-form">
      <div class="sales-board-line">
        <div class="sales-board-line-left">1购买数量：</div>
        <div class="sales-board-line-right">
          <v-counter :max="100" :min="0"></v-counter>
        </div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">1媒介：</div>
        <div class="sales-board-line-right">
          <mul-chooser :selections="versionList"></mul-chooser>
        </div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">1有效时间：</div>
        <div class="sales-board-line-right">一年</div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">1 总价：</div>
        <div class="sales-board-line-right">500 元</div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">&nbsp;</div>
        <div class="sales-board-line-right">
          <div class="button">立即购买</div>
        </div>
      </div>
    </div>
    <div class="echrtasone">
      <!-- <Card shadow> -->
        <chart-pie
          style="height: 300px"
          :value="pieData"
          text="饼状图"
        ></chart-pie>
      <!-- </Card> -->
    </div>
    <div class="echrtastwo">
      <!-- <Card shadow> -->
        <chart-bar style="height: 300px" :value="barData" text="柱状图" />
      <!-- </Card> -->
    </div>
    <div class="sales-board-des">
      <div class="left">
        <h2>computed ,methods ,watch ,props, data</h2>
        <p>data :{//定义变量} ==data中的变量之间不能相互访问</p>
        <p>props :{} ==可以是数组或对象类型，用于接收来自父组件的数据</p>
        <p>methods:{//定义方法} ====this.变量名 ->访问data中数据</p>
        <p>
          watch :{} ==监听data中数据的变化，监听路有变化
          一个数据影响到多个数据的变化
        </p>
        <p>
          computed :{} ==计算属性得到的结果会缓存，方便下次使用
          多个数据影响一个数据变化
        </p>
        <!-- <input style="width: 60%" v-model="inputValue" />
          <Button slot="append" v-clipboard="clipOptions">点击复制copy</Button> -->
      </div>
      <div class="right">
        <h2>computed 计算属性</h2>
        <h5>computed与methods区别</h5>
        <p>
          methods:是方法可以传递参数 每一次渲染都会执行；；computed：是属性
          不能传递参数；有明显的依赖关系 在依赖不变的时候 不让对应的方法执行
          计算属性中必须要关连一个相应数据 否则GETTER函数只执行一次 异步的时候
          尽量不要用computed
        </p>
        <h5>应用场景</h5>
        <p>
          当{ {}}中用到的是复杂得表达式的时候 一般用计算属性处理一下
          把计算属性返回的值放在{{}}；有明显依赖关系的时候 建议使用计算属性
        </p>
        <p>&lt; div&gt; { {personType} } &lt; div&gt;</p>
        <p>computed:{ personType(){retun this.age>=18?'成年人':'未成年'}}</p>
      </div>
    </div>
    <div class="sales-board-dess">
      <h2>事件修饰符 : 事件修饰符处理了许多DOM事件的细节</h2>
      <span
        >.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡</span
      >
      <span>.capture：与事件冒泡的方向相反，事件捕获由外到内</span
      ><span>.self：只会触发自己范围内的事件，不包含子元素</span
      ><span>.once：只会触发一次</span>
      <span
        >.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）</span
      >
      <h3>.stop防止事件冒泡</h3>
      <h5>
        写法==>在点击上加上.stop相当于在每个方法中调用了等同于event.stopPropagation()，点击子节点不会捕获到父节点的事件；未加.stop时候访问的是最外层div
      </h5>
      <div @click.stop="outer">
        <div @click.stop="middle">
          <button @click.stop="inner">点击我</button>
        </div>
      </div>
      <p>{{ message }}</p>
      <h3>.prevent取消默认事件</h3>
      <a href.prevent="https://www.baidu.com/">a标签</a>
      <h3>.capture 捕获事件</h3>
      <h5>
        捕获事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从外至内
        父节点-》子节点的点击事件
      </h5>
      <div @click.capture="outer">
        <div @click.capture="middle">
          <button @click.capture="inner">点击我</button>
        </div>
      </div>
      <p>{{ message }}</p>
      <h3>.self</h3>
      <h5>修饰符.self只会触发自己范围内的事件，不会包含子元素</h5>
      <h3>.once 只执行一次点击</h3>
      <h5>如果我们在@click事件上添加.once修饰符，只要点击按钮只会执行一次。</h5>
      <h2>键盘修饰符</h2>
      <p>
        在JavaScript事件中除了前面所说的事件，还有键盘事件，也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难，所以Vue为最常用的键盘事件提供了别名：
      </p>
      <button
        @keyup.enter="enter"
        @keyup.tab="tab"
        @keyup.up="up"
        @keyup.delete="deletel"
        @keyup.down="down"
        @keyup.left="left"
        @keyup.right="right"
      >
        ssss
      </button>
      <span>.left：鼠标左键 .middle：鼠标中间滚轮 .right：鼠标右键</span>
    </div>
  </div>
</template>

<script>
import VCounter from "./counter";
import MulChooser from "./multiplyChooser";
import ChartPie from "./echarts/pie"; //饼状图图
import ChartBar from "./echarts/bar"; //柱状图
export default {
  name: "forecast",
  components: {
    VCounter,
    MulChooser,
    ChartPie,
    ChartBar,
  },
  data() {
    return {
      barData: {
        1: 13253,
        2: 34235,
        3: 26321,
        4: 12340,
        5: 24643,
        6: 1322,
        7: 1324,
      },
      pieData: [
        { value: 335, name: "直接访问" },
        { value: 310, name: "邮件营销" },
        { value: 234, name: "联盟广告" },
        { value: 135, name: "视频广告" },
        { value: 1548, name: "搜索引擎" },
      ],
      inputValue: "输入内容",
      message: "测试冒泡事件",
      versionList: [
        {
          label: "纸质报告",
          value: 0,
        },
        {
          label: "pdf",
          value: 1,
        },
        {
          label: "页面报告",
          value: 2,
        },
        {
          label: "邮件",
          value: 3,
        },
      ],
    };
  },
  methods: {
    enter() {
      alert("回车键");
    },
    right() {
      alert("右键");
    },
    left() {
      alert("左键");
    },
    tab() {
      alert("tab制表建");
    },
    up() {
      alert("向上键");
    },
    down() {
      alert("向下键");
    },
    inner: function () {
      this.message = "inner： 这是最里面的Button";
    },
    middle: function () {
      this.message = "middle: 这是中间的Div";
    },
    outer: function () {
      this.message = "outer: 这是外面的Div";
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
.sales-board-line {
  clear: both;
  padding-bottom: 20px;
}
.sales-board-line-left {
  display: inline-block;
  width: 100px;
}
.sales-board-line-right {
  display: inline-block;
  width: 75%;
}
.sales-board {
  background: #fff;
}
.button {
  background: #4fc08d;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}
.button:hover {
  background: #4fc08d;
}
.sales-board-intro h2 {
  font-size: 20px;
  padding: 20px;
}
.sales-board-intro p {
  background: #f7fcff;
  padding: 10px 20px;
  color: #999;
  line-height: 1.8;
}
.sales-board-form {
  width: 400px;
  border: 1px solid red;
  float: left;
  padding: 30px 20px;
  font-size: 14px;
}
.echrtasone {
  width: 400px;
  border: 1px solid rgb(115, 255, 0);
  float: left;
  margin-left: 20px;
}
.echrtastwo {
  width: 600px;
  margin-left: 20px;
  float: left;
  border: 1px solid rgb(55, 0, 255);
}
.sales-board-line {
  clear: both;
  padding-bottom: 20px;
}
.sales-board-line-left {
  display: inline-block;
  width: 100px;
}
.sales-board-line-right {
  display: inline-block;
  width: 75%;
}
.sales-board-des,
.sales-board-dess {
  clear: both;
  border-top: 20px solid #f0f2f5;
  padding: 15px 20px;
}
.sales-board-des p {
  line-height: 1.6;
  font-size: 12px;
  margin-top: 8px;
  // font-weight: bold;
}
.sales-board-des h2 {
  font-size: 20px;
  padding-bottom: 15px;
}
.sales-board-des h3 {
  font-size: 18px;
  font-weight: bold;
  padding: 20px 0 10px 0;
}
.sales-board-des li {
  padding: 5px 0;
}
.left,
.right {
  float: left;
}
.right {
  height: 200px;
  width: 1100px;
  margin-left: 50px;
  border: 1px solid red;
  p {
    margin-left: 10px;
  }
}
.sales-board-table {
  width: 100%;
  margin-top: 20px;
}
.sales-board-table th {
  background: #4fc08d;
  color: #fff;
}
.sales-board-table td {
  border: 1px solid #f0f2f5;
  padding: 15px;
}
.sales-board-dess {
  clear: both;
  span {
    margin-left: 20px;
    border-right: 2px solid red;
  }
  h2 {
    margin-top: 20px;
  }
  button {
    width: 80px;
    height: 30px;
  }
}
</style>
